<template>
  <div class="overview_inverter">
    <div class="flex-container">
      <div class="flex-item box-realTime">
        <!-- <realTimeDisplay ref="realTimeDisplay"></realTimeDisplay> -->
        <realTimeDisplay ref="realTimeDisplay"></realTimeDisplay>
      </div>
    </div>
    <div class="flex-container">
      <div class="flex-item box-sale-bar">
        <div class="title">
          {{$t('charg.duration.record')}}
        </div>
        <div id="powerChart" :style="{width: '100%', height: '300px'}">
            <baseTable   row-key='sid' :data="dataRows" border  stripe   :column='column' :select='false'>
              <template #durationMinute='{data}'>
                <span>{{data.durationHour + $t('index.unitTimeHour') + ' '+ data.durationMinute + $t('test.deviceTest.js_deleteTestDevice_minutes')}}</span>
              </template>
              <template #electric='{data}'>
                <span>{{ data.electric != null ? data.electric+' kWh' : '-'}}</span>
              </template>
            </baseTable>
        </div>
      </div>

      <div class="flex-item box-power-bar">
        <div class="title clearfix">
          <span>{{reportType == 1? $t('overview.gridPower'): $t('index.totalConsumption')}}</span>
        </div>
        <div class="btn-group2 right-box-radio clearfix"> 
          <div class="radio-wrap">
            <div :class="reportType==1?'active':''" @click='changeActive("1")'>
              <span class="radio-box-modal"></span><font>{{$t('overview.daily')}}</font>：
            </div>
            <div class="btn-group">
              <span class="box-title" :class="{ active:isActive==1 }" @click.stop="toggleBox(1)">
                <span class="title-btn" id="day_menu">{{day}}</span><i class="el-icon-caret-bottom"></i>
              </span>

              <ul class="box-time" style="width:210px">
                <li class="title">{{$t('overview.daily')}}</li>
                <template v-for="count in dayList" >
                    <li :key="count">
                    <el-button 
                      type="text" 
                      :disabled="year==now_year&&month==now_month&&count>now_day" 
                      @click="day=count;isActive=0" 
                    >{{count}}
                    </el-button>
                  </li>
                </template>
              </ul>
            </div>
          </div>

          <div class="radio-wrap">
            <div :class="reportType==2?'active':''" @click='changeActive("2")'>
              <span class="radio-box-modal"></span><font>{{$t('overview.month')}}</font>：
            </div>
            <div class="btn-group">
              <span class="box-title" :class="{ active:isActive==2 }" @click.stop="toggleBox(2)">
                <span class="title-btn" id="month_menu">{{month}}</span><i class="el-icon-caret-bottom"></i>
              </span>
              <ul class="box-time" colspan="6"  style="width:180px">
                <li class="title">{{$t('overview.month')}}</li>
                <template v-for="count in 12" >
                  <li :key="count">
                    <el-button 
                      type="text" 
                      :disabled="year==now_year&&count>now_month" 
                      @click="month=count;isActive=0" 
                    >{{count}}
                    </el-button>
                  </li>
                </template>
              </ul>
            </div>
          </div>

          <div class="radio-wrap">
            <div :class="reportType==3?'active':''"  @click='changeActive("3")'>
              <span class="radio-box-modal"></span><font>{{$t('overview.year')}}</font>：
            </div>
            <div class="btn-group">
              <span class="box-title" :class="{ active:isActive==3 }" @click.stop="toggleBox(3)">
                <span class="title-btn" id="year_menu">{{year}}</span><i class="el-icon-caret-bottom"></i>
              </span>
              <ul class="box-time" style="width:150px">
                <li class="title">{{$t('overview.year')}}</li>
                <template v-for="count in yearList">
                  <li class="grow" :key="count" @click="year=count;isActive=0">
                    <el-button 
                      type="text">
                      {{count}}
                    </el-button>
                  </li>
                </template>
              </ul>
            </div>
          </div>

          <div class="radio-wrap">
            <div :class="reportType==4?'active':''" @click='changeActive("4")'> 
              <span class="radio-box-modal"></span>{{$t('all')}}
            </div>
          </div>

        </div>
        <div class="wrap-chart">
          <div id='charg1' :style='reportType==1?"":"display:none;"'>1</div>
          <div id='charg2' :style='reportType==2 || reportType==3 || reportType==4?"":"display:none;"'>2</div>
          
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import '@/utils/index.js'
import realTimeDisplay from '../overview-charg/real-time-display-charg'
let echarts = require('echarts/lib/echarts');
require('echarts/lib/chart/pie')
import baseTable from '../../components/common/baseTableNew'
export default {
  props:{
    activeName:{
      type:String,
      default:()=>{
          return '1'
      }
    }
  },
  components:{
    realTimeDisplay,
    baseTable
  },
  data(){
    return{
      dataRows:[],
      column:[
        {
            title: this.$t('index.startTime'),
            value: 'startTime',
            slot: 'startTime'
        },
        {
            title: this.$t('index.endTime'),
            value: 'endTime',
            slot: 'endTime'
        },
        {
            title: this.$t('charg.duration'),
            value: 'durationMinute',
            slot: 'durationMinute'
        },
        {
            title: this.$t('charg.electric'),
            value: 'electric',
            slot: 'electric'
        },
      ],
      timer:null,
      markers:[],
      pileSn:sessionStorage.getItem('selRow_charg_pileSn') || '',
      siteId:sessionStorage.getItem('selRow_charg_siteId') || '',
      userData:JSON.parse(sessionStorage.getItem('userObj')),
      isSunFlag:true,
      sunData:{startTime:'6:00AM',endTime:'6:00PM',sunAngle:0,weatherImg:''},
      
      yieldObj:{todayYield:0,monthYield:0,yearYield:0,totalYield:0,gridPower:0},
      electricity:{price:'',currency:''},//节约电费
      userPower:{},
      pvBattery:{
        pvPower:0,
        batteryPower:0,
        bmsCapation:0,
        bmsState:-1//默认电池状态未知-不显示
      },
      batteryStatusColor:'',
      chartType:'bar',
      reportType:'2',
      yeildType:'1',
      pieYield:0,
      pieConsumeEnergy:0,
      currentTime:this.$options.filters['dateFormat'](new Date()),
      currentDate:this.$options.filters['dateFormat'](new Date(),'YYYY-MM-DD'),
      day:this.$options.filters['dateFormat'](new Date(),'DD'),
      month:this.$options.filters['dateFormat'](new Date(),'MM'),
      year:this.$options.filters['dateFormat'](new Date(),'YYYY'),
      now_day:this.$options.filters['dateFormat'](new Date(),'DD'),
      now_month:this.$options.filters['dateFormat'](new Date(),'MM'),
      now_year:this.$options.filters['dateFormat'](new Date(),'YYYY'),
      yearList:[],
      isActive:0,
      yieldPieChart1:{},
      yieldPieChart2:{},
      yieldBarChart:{},
      pickerOptions:{ //禁用今天之后的时间
          disabledDate(time) {
              return time.getTime() > Date.now()
          }
      },
      pvTypeCountData:{},
      charg1:'',
      charg2:'',
    }
  },
  mounted(){
    this.devchargerecordGetPage()
    this.yearList=[]
    for(let i=2017;i<=this.year;i++){
      this.yearList.push(i);
    }
    this.charg1 = echarts.init(document.getElementById('charg1'));
    this.charg2 = echarts.init(document.getElementById('charg2'));
    // this.charg3 = echarts.init(document.getElementById('charg3'));
    // this.charg4 = echarts.init(document.getElementById('charg4'));
    
    window.addEventListener('resize', () => {
        this.charg1.resize()
        this.charg2.resize()
    })
    this.changeActive(this.reportType)
    document.addEventListener('click',this.toggleBox);
  },
  destroyed(){
    document.removeEventListener('click',this.toggleBox);
  },
  computed: {
    dayList: function () {
      if(this.month==1||this.month==3||this.month==5||this.month==7||this.month==8||this.month==10||this.month==12) return 31;
      if(this.month==4||this.month==6||this.month==9||this.month==11) return 30;
      if(this.month==2&&this.year%4==0) return 29;
      if(this.month==2&&this.year%4!=0) return 28;
    }
  },
  watch:{
    day(){
      this.changeActive(this.reportType)
    },
    month(){
      this.day=1;
      this.changeActive(this.reportType)
    },
    year(){
      this.day=1;
      this.changeActive(this.reportType)
    }
  },
  methods:{
    async changeActive(num){
      this.reportType = num
      let res = await this.API.devchargeindexGetYield({
        siteId:this.siteId,
        pileSn:this.pileSn,
        reportType:this.reportType,
        year:this.year,
        month:this.month,
        day:this.day,
        webTime:this.$options.filters['dateFormat'](new Date(),'YYYY,MM,DD'),
      })
      if(num != 1){
        this.initBar(num,res.returnList)
      }else{
        this.initLine(res.returnList)
      }
    },
    initLine(data){
      let xDara = []
      let YDara = []
      let text = this.$t('index.unitTimeHour')
      for(let i=0;i<data.length;i++){
        xDara.push(data[i].timeStringVal.split(' ')[1])
        YDara.push(this.comm.floatNum(data[i].power))
      }
      this.initEchartBar(xDara,YDara,text,1)
    },
    initBar(type,data){
      let xDara = []
      let YDara = []
      let text = ''
      if(type == 2){
        text = this.$t('index.unitTimeDay')
        for(let i=1;i<=this.dayList;i++){
          xDara.push(i)
          YDara.push('-')
        }
        for(let i=0;i<data.length;i++){
          YDara[data[i].abscissa-1] = data[i].yield
        }
      }
      if(type == 3){
        text = this.$t('index.unitTimeMonth')
        for(let i=1;i<=12;i++){
          xDara.push(i)
          YDara.push('-')
        }
        for(let i=0;i<data.length;i++){
          YDara[data[i].abscissa-1] = data[i].yield
        }
      }
      if(type == 4){
        text = this.$t('index.unitTimeYear')
        for(let i=0;i<data.length;i++){
          xDara.push(data[i].month)
          YDara.push(data[i].yield)
        }
      }
      this.initEchartBar(xDara,YDara,text,2)
    },
    initEchartBar(xDara,YDara,text,type){
      console.log(
        xDara,YDara,text,type,'xDara,YDara,text'
      );
      let that = this
      let option = {
        color:['#6da719'],
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross'
            },
            formatter:function(params){
              params = params[0]
              let text1 = ''
              if(type == 2){
                text1 = params.name+'('+text+')'+'<br>'+params.seriesName+': '+params.value
              }else{
                text1 = params.name+'<br>'+params.seriesName+': '+params.value
              }
              
              return text1
            }
        },
        grid : {
          left : '15px',
          top : '50px',
          right : '70px',
          bottom : '40px',
          containLabel :true
        },
        legend: {
            itemWidth: 20,
            itemHeight: 15,
            itemGap: 30,
            textStyle: {
                color: '#68676C',
                fontSize: 12
            },
            y: 'bottom',
            
        },
        xAxis:{
          name:text,
          nameTextStyle: {
              color: '#68676C',
              fontSize: 11
          },
          data : xDara,
          axisLine: {
              onZero: false,
              lineStyle: {
                  width: 0
              }
          },
          splitLine: {
              show: false
          },
          boundaryGap: true,
          axisTick: {
              show: false
          },
        },
        yAxis:{
          type: 'value',
          name:this.reportType == 1?'kW':'kWh',
          axisLine: {
              show: false
          },
          axisTick: {
              show: false
          },
          splitLine: {
              show: true,
              lineStyle: {
                  color: ['#dbdbdc']
              }
          },
          axisLabel: {
              textStyle: {
                  color: '#68676C'
              }
          }
        },
        series:[{
          name:this.reportType == 1? this.$t('charg.Charging.Power'): this.$t('charg.electric'),
          type:type==2?'bar':'line',
          symbolSize: 0,
          smooth: false,
          data:YDara,
          symbol:'circle',
          barMaxWidth:20
        }]
      }
      if(type == 2){
        this.charg2.setOption(option)
        this.charg2.resize()
      }else{
        this.charg1.setOption(option)
        this.charg1.resize()
      }
    },
    async devchargerecordGetPage(){
      let res = await this.API.devchargerecordGetPage({
        current:1,
        size:5,
        pileSn:this.pileSn
      })
      this.dataRows = res.rows
    },
    toggleBox(index){
      index=index!=0?index:0;
      if(index==0) console.log(index);
      if (this.isActive==index) {
        this.isActive=0;
      }else{
        this.isActive=index;
      }
    },
    
  }
}
</script>

<style lang="less">
@color_box_bg:#EFEFEF;
@color_title:#444;
@color_text:#636162;
@color_unit:#636162;
@color_light:#ff8920;
@border_bottom:1px dashed #D1D1D1;
@border_radius:3px;
@color_unit:#8a8a8a;
.overview_inverter{
  #charg1,
  #charg2{
    width: 100%;
    height: 300px;
  }
  #powerChart{
    box-sizing: border-box;
    padding: 10px;
    .table-nav-box{
      display: none;
    }
  }
  .page-title{
    padding: 10px 0 0 10px;
    color: @color_title;
    font-size: 14px;
    span{
      color: @color_light;
    }
  }
  .prompt{
    color: @color_light;
    font-size: 25px;
    margin: 0 20px;
  }
  .flex-container{
    display:-webkit-flex;
    display: flex;

    .flex-item{
      margin: 10px;
      flex:1;
      background:#fff;
      box-shadow: 0px 0px 5px rgba(0,0,0,.2);
      // background:@color_box_bg;
      border-radius: @border_radius;
      .title{
        padding: 0 10px;
        height: 40px;
        line-height: 40px;
        border-bottom: @border_bottom;
        color: @color_title;
      }

      &.box-realTime{
        padding-top:10px;
      }

      &.sun-box{
        .sun-wrap{
          max-width:420px;
          margin:0 auto;
          color: @color_text;
          .inner .wrap{
            padding:5px 0px;
            text-align: center;
            >*{
              vertical-align: middle;
            }
            label{
              font-size: 14px;
              color: @color_text;
              padding-right: 5px;
            }
            .value{
              font-size:18px;
              color: @color_light;
            }
            .unit{
              font-size: 12px;
              color: @color_unit;
              margin-left:3px ;
            }
            img{
              padding-right: 5px;
              width: 18px;
            }
          }

          .sun-box-pix{
              position: relative;
              height: 200px;
          }
          .sun-gif{
              position: absolute;
              width: 100%;
              overflow: hidden;
              bottom: 0px;
          }

          .sun-rotate{
              position: absolute;
              top: 0px;
              left: 0px;
              transition: 1s;
          }
          .weather-box{
            padding:0 !important;
            width:34%;
            float:left;
            text-align:center;
          }
          .weather-box .weather-info-data{
            font-size: 16px;
            line-height: 70px;
          }
          .inner.no-data span{
            display: block;
            font-size: 14px;
            margin-top: 40px;
            line-height: 25px;
          }
          .weather-info-temperature{
            font-size: 16px;
          }
          .weather-pic-box{
            width: 70px;
            display: block;
            margin: 0 auto;
          }
          .sun-time-day{
            font-size: 12px;
          }
        }
      }

      &.box-power{
        display: flex;
        flex-direction: column;
        .row{
          flex: 1;
          display: flex;
          flex-direction: row;
          align-items: center;
          border-right: 1px solid#DCDCDC;
          &:last-child{
            border-bottom: 1px solid #DCDCDC;
          }
          .col{
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100%;
            border-left: 1px solid#DCDCDC;
            border-top: 1px solid#DCDCDC;
            .img{
              margin: 0px auto;
              width: 40px;
              height: 40px;
              background: url(../../assets/img/overview/icons_power.png) no-repeat;
              &.icon1{
                background-position: 0 0;
              }
              &.icon2{
                background-position: 0 -45px;
              }
              &.icon3{
                background-position: 0 -90px;
              }
              &.icon4{
                background-position: 0 -135px;
              }
              >img{
                height:50px;
              }
            }
            .title{
              color: @color_title;
              border-bottom: @border_bottom;
              padding: 6px;
            }
            .text{
              padding: 3px 0;
              text-align: center;
              .value{
                font-size: 20px;
                color: @color_light;  
              }
              .unit{
                font-size: 12px;
                color: @color_unit;
                margin-left:3px ;
              }
            }
            p{
              margin: 0;
              color: @color_text;
              font-size: 14px;
            }
          }
        }

      }
      &.box-power-bar{
        position: relative;
        .title{
          >.el-select {
            margin-left:10px;
          }
        }
        .chartBtnWrap{
          float: right;
          li{
            float: left;
            padding-left: 15px;
            cursor: pointer;
            .iconfont{
              font-size: 20px;
              color: @color_unit;
            }
            &.active{
              .iconfont{
                color:@color_light;
              }
            }
          }
        }
        .right-box-radio{
          position: absolute;
          right: 20px;
          z-index: 3;
        }
        
        .wrap-chart{
          position: relative;
        }
        .wrap-pie{
          >div{
            float: left;
            width: 50%;
            &[echart]{
              height: 280px;
            }
            &.info{
              text-align: center;
              color: @color_text;
              font-size: 14px;
              .value{
                color: @color_light;
              }
            }
          }
        }
        .wrap-pie,.wrap-bar{
          position: absolute;
          width: 100%;
          height: max-content;
          top: 0;
          left: 0;
          background: #fff;
          visibility: hidden;
          &.active{
            visibility:visible;
          }
        }

      }
      &.box-info{
        .moduleInfo {
          display: -webkit-flex;
          display: flex;
          padding-top: 40px;
          height: 249px;
          justify-content:center;
          font-size:14px;
        }
        .moduleInfo li{
          // display:none;
          width:50%;
          text-align:center;
        }
        .moduleInfo li>div.wrap{
          position:relative;
          height: 50%;
        }
        .moduleInfo p{
          line-height:25px;
        }
        .moduleInfo p .value{
          color: #fc8920;
            font-size: 16px;
        }
        .moduleInfo p .unit{
          padding-left:2px;
          color: #8a8a8a;
            font-size: 12px;
        }
        .bmsCapation {
          position: absolute;
            top: 50%;
            left: 0;
            width: 100%;
            margin-top: -9px;
            font-size: 20px;
            color: #2b6500;
        }
        .moduleInfo li img{
          width:150px;
        }
        .batteryStatus{
            margin: 2px 0;
          display: inline-block;
            width: 16px;
            height: 16px;
            vertical-align: text-top;
            border-radius: 50%;
        }
        .batteryStatus.gray{
          background:#999;
          background-image: radial-gradient(circle, #d0d0d0,#757575);
        }
        .batteryStatus.red{
          background:#f00;
          background-image: radial-gradient(circle, #ffb887,#f00);
        }
        .batteryStatus.green{
          background:#0f0;
          background-image: radial-gradient(circle, #a8fb38,#00a012);
        }

        .moduleInfo li div.battery{
          padding:4px 18px 4px 4px;
          position:relative;
          width: 150px;
            height: 71px;
          left: 50%;
            margin-left: -75px;
            background: url(../../assets/img/overview/battery-bg.png);
            background-size: cover;
        }
        #batteryShow div.wrap{
          padding-top: 3%;
        }
        .bmsRer{
            height: 100%;
            width: 0;
            transition:.5s;
            background: #71d414;
          background: linear-gradient(45deg, #5bb900, #8cef2e);
            border-radius: 6px;
        }
        .icon-battery{
          display:none;
            position: absolute;
            top: 50%;
            right: 12%;
            width: 20px;
            height: 40px;
            transform: translateY(-50%);
            background-image: url(../../assets/img/overview/icon-charge.png);
            background-repeat:no-repeat;
            background-size:40px 40px;
          background-position:0 0;
        }
        .icon-battery.charge,.icon-battery.discharge{
          display:block;
        }
        .icon-battery.discharge{
          background-position:-20px 0;
        }
      }
      .el-button--primary {
        color: #6d6d6d;
        background-color: #ffffff;
        border-color: #f4b600;
      }
    }

    .time-group{
      float: right;
      .el-input{
        width: 150px;
      }
      button{
        background: #fff;
        border:none;
        &:focus {
          outline: none;
        }
        &:not(:disabled):hover{
          cursor: pointer;
          color: @color_light;
        }
        i{
          line-height: 24px;
          font-weight: bold;
          font-size: 14px;
          
        }
      }
    }

  }
}
</style>